<template>
  <div class="common-layout">
    <el-container>
      <el-aside width="200px">
        <img src="@/assets/logo.png" alt="">
          <!-- 菜单开始 -->
           <el-menu
              :router="true"
              unique-opened
           >
               <!-- 次级菜单 -->
        
          <el-menu-item index="/yemian">
          <el-icon ><Odometer /></el-icon>
          仪表盘
          </el-menu-item>

          <el-sub-menu index="2">
            <template #title>
              <el-icon><Menu /></el-icon>常用设置
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
        
              <el-menu-item index="/yemian2">教师管理</el-menu-item>

              <el-menu-item index="/yemian3">学生管理</el-menu-item>
              <el-menu-item index="/yemian4">公告管理</el-menu-item>
              <el-menu-item index="/yemian5">系统配置</el-menu-item>
              <el-menu-item index="/yemian6">判断服务器</el-menu-item>
            </el-menu-item-group>    

          </el-sub-menu>

            <el-sub-menu index="3">
            <template #title>
              <el-icon><Aim /></el-icon>问题
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="/yemian7">问题列表</el-menu-item>
              <el-menu-item index="/yemian8">增加题目</el-menu-item>
              <el-menu-item index="/yemian9">导入导出题目</el-menu-item>
            </el-menu-item-group>    
          </el-sub-menu>


          <el-sub-menu index="4">
            <template #title>
              <el-icon><Trophy /></el-icon>比赛&练习
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="/yemian10">比赛列表</el-menu-item>
              <el-menu-item index="/yemian11">创建比赛</el-menu-item>
            </el-menu-item-group>    
          </el-sub-menu>
          <el-sub-menu index="5">
            <template #title>
              <el-icon><Collection /></el-icon>课程
            </template>
            <!-- 次级菜单的菜单项 -->
            <el-menu-item-group>
              <el-menu-item index="/yemian12">课程列表</el-menu-item>
              <el-menu-item index="/yemian13">创建课程</el-menu-item>
            </el-menu-item-group>    
          </el-sub-menu>
        </el-menu>
      </el-aside>
      <el-container>


        <el-header>
          <el-dropdown>
      
        <el-icon><Search /></el-icon>
        <el-icon><Share /></el-icon>
        username<el-icon><arrow-down /></el-icon>
      
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>logout</el-dropdown-item>
          
        </el-dropdown-menu>
      </template>
    </el-dropdown>
        </el-header>

        <el-main>
      <router-view></router-view>
        </el-main>

        <el-footer>web前端开发实战课程版权所有
            <el-button circle type="info" @click="open">
                <el-icon><InfoFilled /></el-icon>
            </el-button>

        </el-footer>
      </el-container>
    </el-container>
  </div>
</template>

<script>

import {InfoFilled,Odometer,Aim,Collection,Menu,Trophy,Search,Share,ArrowDown} from '@element-plus/icons-vue'


export default {
   components:{
     InfoFilled,
     Odometer,
     Aim,
     Collection,
     Menu,
     Trophy,
     Search,
     Share,
     ArrowDown,



   },


}
</script>


<style>
.el-header{
    background-color:#F9FAFC;
    text-align: right;
    margin-top:30px
}
.el-footer {
    background-color:#EDECEC;
    color:var(--e-text-color-primary);
    text-align: center;
    
    line-height: 60px;
}


.el-aside{
    background-color:white;
    text-align:center;
    line-height:200px
}
.el-main{
    background-color:#EDECEC;
    text-align:center
}



</style>
